<template>
  <div :class="styles['drawer-upload-bar']">
    <div>
      <h4 class="ato-sub-title ato-mb-8" @click="updateData"><i>①</i>录制开箱视频:</h4>
      <VideoUpload class="ato-ml-24" :disabled="props.disabled" v-model="state.videoFile"/>
    </div>
    <div>
      <h4 class="ato-sub-title ato-mb-8"><i>②</i>拍摄卡牌大合照:</h4>
      <div :class="[styles['upload-group-pic'], 'ato-ml-24']">
        <PictureUpload type="order" v-for="(item, index) in state.pictureList" :key="index" :class="styles['pic-item']" v-model="state.pictureList[index]" :disabled="props.disabled" @change="updateData"/>
      </div>
    </div>
    <div :class="styles['amount']">
      <h4 class="ato-sub-title ato-mb-12"><i>③</i>卡牌数量核对:</h4>
      <div class="ato-ml-24">
        <p>送卡总量： <b>{{ state.sendCount || '-' }}</b></p>
        <p class="ato-mt-6">
          <span>*实收数量：</span>
          <b v-if="props.disabled">{{ state.actualTotal || '-' }}</b>
          <el-input
              v-else
              v-model="state.actualCount"
              placeholder="输入数量"
              clearable
              style="width: 100px"
              @change="changeActualCount"
          />
        </p>
      </div>
    </div>
  </div>
</template>

<script setup name="DrawerUploadBar">
import {computed} from 'vue'
import {ElMessage} from 'element-plus'
import { VideoUpload, PictureUpload } from '@/components'
import {batchAddCardApi} from '@/service/card'
import {updatePictureApi} from '@/service/picture'
import {fileToUpload} from '@/utils/formatterFile'

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Object,
    default: () => ({})
  },
  orderNo: {
    type: String,
    default: ''
  },
  trackingNo: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])

// 代理数据
const state = computed(() => props.modelValue)

// 卡牌实收数量调整
async function changeActualCount (val) {
  const params = {
    orderNo: props.orderNo,
    actualCount: val
  }
  const res = await batchAddCardApi(params)
  if (res.code === __code) {
    ElMessage.success('数据更新成功')
  }
}

// 接口更新数据
async function updateData () {
  const {videoFile, pictureList} = props.modelValue
  const res = await updatePictureApi(fileToUpload({videoFile, pictureList}, props.trackingNo))
  if (res.code === __code) {
    ElMessage.success('数据更新成功')
  }
}

</script>

<style module="styles" lang="less" src="./index.less">
</style>
